<template>
	<view class="topic-add-box">
		<view class="topic-add">
			<span class="span">#{{detailInfo.name}}</span>
		</view>
		<view class="form-s">
			<uni-forms :modelValue="formData">
				<uni-forms-item class="uni-sug" required>
					<view class="uni-topic-t">
						<textarea class="uni-topic-textarea" maxlength="300" v-model="formData.content" placeholder="这是一段评价不超过300个字"></textarea>
						<span class="span">{{formData.content&&formData.content.length || 0}}/300</span>
					</view>
				</uni-forms-item>
				<uni-forms-item class="uni-sug" required>
					<view class="uni-sug-label">上传图片:<span class="span">（最多上传9张图片）</span></view>
					<view>
						<uploadImgs v-model="formData.images" :width="100" :height="100" :maxCount="9"></uploadImgs>
					</view>
				</uni-forms-item>
			</uni-forms>
		</view>
		<view @click="submitForm" class="submit-btn">发 布</view>
	</view>
</template>

<script setup lang="ts">
	import { ref,reactive } from 'vue'
	import { onLoad } from "@dcloudio/uni-app"
	import { topicsInfo,topicsCreate } from '@/common/API/member'
	import uploadImgs from '@/components/upload/uploadImgs.vue'
	const formData = reactive({
		content: '',
		images: []
	})
	const curId = ref()
	onLoad((options)=>{
		curId.value = options.id
		getDetail(options.id)
	})
	// 话题详情
	const detailInfo = ref({})
	const getDetail = async (id)=>{
		let res = await topicsInfo(id)
		detailInfo.value = res
	}
	
	//提交表单
	const submitForm = async () => {
		console.log(formData.images)
		if(!formData.content){
			uni.showToast({
				title:'请输入评价内容',
				icon:'none'
			})
		}else{
			let data = {
				topicId: curId.value,
				content: formData.content,
				images: formData.images.toString()
			}
			let res = await topicsCreate(data)
			uni.showToast({
				title:'发布成功'
			})
			setTimeout(()=>{
				uni.navigateBack({
					delta:1
				})
			},2000)
		}
	}
</script>
<style>
	page {
		height: 100%;
		background: #fff;
	}
</style>
<style lang="scss" scoped>
.topic-add-box{
	padding-bottom: 40rpx;
	.topic-add{
		padding: 60rpx 32rpx 36rpx 32rpx;
		border-bottom: 1px solid rgba(240, 240, 240, 1);
		.span{
			padding: 4rpx 16rpx;
			background: rgba(253, 150, 24, 1);
			display: inline-block;
			color: #fff;
			border-radius: 8rpx;
			font-size: 24rpx;
		}
	}
	.form-s {
		padding: 0 32rpx;
	}
	.uni-sug{
		margin-bottom: 0;
		::v-deep .uni-forms-item__label{
			display: none;
		}
		.uni-sug-label{
			color: rgba(77, 77, 77, 1);
			font-size: 32rpx;
			padding: 20rpx 0;
			.span{
				font-size: 24rpx;
				color: rgba(153, 153, 153, 1);
			}
		}
		.uni-topic-textarea{
			width: 638rpx;
			height: 540rpx;
			font-size: 28rpx;
			color: rgba(0, 0, 0, 1);
		}
	}
	.uni-topic-t{
		height: 656rpx;
		font-size: 28rpx;
		position: relative;
		border: 1px solid rgba(240, 240, 240, 1);
		padding: 24rpx;
		margin-top: 32rpx;
		.span{
			position: absolute;
			right: 20rpx;
			bottom: 20rpx;
			color: rgba(153, 153, 153, 1);
			font-size: 24rpx;
		}
	}
	.submit-btn{
		margin: 94rpx 32rpx 40rpx 32rpx;
		border-radius: 200rpx;
		background: rgba(253, 150, 24, 1);
		color: #fff;
		border-radius: 200rpx;
		height: 84rpx;
		font-size: 32rpx;
		text-align: center;
		line-height: 84rpx;
	}
}
</style>